<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog.detail.css">
</head>
<body>
     <!-- 导航栏 -->
     <div class="nav">
        <img src="image/loglo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个spacer用来占位 -->
        <span class="spacer"></span>
        <!-- 按钮 -->
        <a href="blog.list.html">主页</a>
        <a href="blog.edit.html">写博客</a>
        <a href="#">注销</a>
    </div>
    <!-- 页面主体 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
         <!-- 用这个 .card 来表示用户的信息 -->
         <div class="card">
             <img src="image/touxiaon.jpg" alt="">
             <h3>卢同学</h3>
             <a href="#">github 地址</a>
             <div class="counter">
                 <span>文章</span>
                 <span>分类</span>
             </div>
             <div class="counter">
                 <span>2</span>
                 <span>3</span>
             </div>
         </div>
     </div>
         <!-- 右侧内容详情 -->
         <div class="container-right">
            <!-- 这个div用来放博客的内容 -->
             <div class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客时间 -->
                <div class="date">2022 09 21 12:00:00</div>
                <!-- 博客正文 -->
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum ipsam corrupti modi omnis? Dolore alias dolores asperiores veritatis eum beatae, explicabo eius id quas, ipsa iure dolor aspernatur tempora?</p>

                </div>
             </div>
 
         </div>
     </div>
</body>
</html>